<template>
  <el-dialog
    :title="title"
    :model-value="visible"
    :draggable="true"
    width="80%"
    :before-close="handleClose"
    append-to-body
    class="largeScreen-dialog analyzeAndWarn"
  >
    <el-form :model="queryParams" :inline="true" ref="form" label-width="100px" @submit.prevent>
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParams.name" @keyup.enter="handleQuery"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="handleQuery"> 查询</el-button>
        <el-button size="small" @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-scrollbar height="600">
      <div class="card-box">
        <div class="card-item" v-for="item in ListData" :key="item.id" @click="goElectronicFenceHandle(item)">
          <img :src="cardIcon" alt="暂无" />
          <div class="card-item-content">
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getElectronicFenceList } from '@/api/earlyWarning/index.js';
import cardIcon from '@/assets/largescreen/top-icon1.png';

interface ElectronicFenceItem {
  id: string | number;
  name: string;
  ipAddressAiu: string;
}

interface QueryParams {
  name?: string;
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '电子围栏'
  }
});

const emit = defineEmits(['update:visible']);

const ListData = ref<ElectronicFenceItem[]>([]);
const loading = ref(false);
const form = ref();
const queryParams = ref<QueryParams>({
  name: undefined
});

//获取列表的数据
const getList = async () => {
  try {
    loading.value = true;
    const res = await getElectronicFenceList(queryParams.value);
    ListData.value = res.data;
  } finally {
    loading.value = false;
  }
};

//关闭回调
const handleClose = () => {
  emit('update:visible', false);
};

//前往电子围栏外链
const goElectronicFenceHandle = (item: ElectronicFenceItem) => {
  window.open(`http://${item.ipAddressAiu}:8088`, '_blank');
};

// 查询列表
const handleQuery = () => {
  getList();
};

//重置
const resetForm = (formName: string) => {
  form.value?.resetFields();
  queryParams.value = { name: undefined };
  getList();
};

watch(
  () => props.visible,
  (val) => {
    if (val) {
      getList();
    }
  }
);
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  color: #0be4f1;
}

.analyzeAndWarn {
  .el-dialog__body {
    background-color: #083577;
  }
}

.card-box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 20px;
  box-sizing: border-box;
  gap: 40px;

  .card-item {
    width: 14%;
    height: 100px;
    background-color: #0655cc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    cursor: pointer;

    img {
      width: 30%;
    }

    .card-item-content {
      min-width: 75%;
      margin-left: 15px;

      .num {
        font-size: 24px;
        font-weight: 600;
        color: #00ffff;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #00ffff;
      }
    }
  }
}
</style>
